import React, { Component } from 'react';
import Item from '../Item'
import PropTypes from 'prop-types'
import './index.css'

class List extends Component {
    static propTypes = {
        todos: PropTypes.array.isRequired,
        changeChecked: PropTypes.func.isRequired,
        handleDelete: PropTypes.func.isRequired
    }
    
    render() {
        const {todos, changeChecked, handleDelete} = this.props;
        return (
            <ul className='todo-main'>
                {
                    todos.map((todo) => {
                        // 或使用{...todo}传值, 在子组件解构取值
                        return <Item key={todo.id} item={todo} changeChecked={changeChecked} handleDelete={handleDelete}/>
                    })
                }
            </ul>
        );
    }
}

export default List;